<template>
  <div class="ivz-online-layout">
    <div class="ivz-online-body">
      <div class="ivz-ol-item ivz-oli-left">
        <!--在线生成器 - 左侧-->
        <ivz-online-left />
      </div>
      <div class="ivz-ol-item ivz-oli-body">
        <!--在线生成器 - 页面设计-->
        <IvzBasicContainer />
      </div>
      <div class="ivz-ol-item ivz-oli-right">
        <!--在线生成器 - 右侧-->
        <ivz-online-right />
      </div>
    </div>
  </div>
</template>

<script>
import '@/lib/index.css'
import Store from '@/store'
import {EventBus, EventType} from '@/event'
import {mapGetters, mapMutations} from 'vuex'
import IvzOnlineLeft from "@/components/IvzOnlineLeft.vue";
import IvzOnlineRight from "@/components/IvzOnlineRight.vue";
import IvzBasicContainer from "@/components/container/IvzBasicContainer.vue";
import $http from "@/utils/http.utils";

export default {
  name: "IvzOnline",
  props: ['saveCallback', 'initCallback'],
  components: {IvzBasicContainer, IvzOnlineLeft, IvzOnlineRight},
  computed: {
    ...mapGetters(["isEdit", "editMetas"])
  },
  beforeRouteEnter(to, from, next) {
    let query = to.query;
    if(query.id) { // 编辑
      $http.get("/lcd/design/edit", {params: query}).then(resp => {
        if(resp.code == 200) {
          Store.commit('recover', resp.data)
        } else {
          this.$msg.errorMessage(resp['message'])
        }
      }).catch(reason => console.error()).finally(() => next())
    } else { // 新增
      Store.commit('resetSys')
      next();
    }
  },
  created() {
    let id = null;
    if(this.isEdit) { // 编辑环境下不能当前表不能作为外键
      id = this.$store.state['id'];
    }

    this.$http.get("/lcd/design/foreign", {params: {id}}).then(resp => {
      if(resp.code==200) {
        let store = this.$store.state['store'];
        store.tableList = resp.data;

        // 处理禁用外键问题
        if(this.isEdit) {
          this.editMetas.forEach(meta => {
            let foreign = meta['tabModel']['foreign'];
            if(meta.type == 'foreign' && foreign) {
              let table = store.tableList.find(item => item.value == foreign[0]);
              if(table) {
                store['foreignList'].push(JSON.parse(JSON.stringify(table))); // 必须放在禁用语句之上
                table['disabled'] = true; // 已经选择的外键直接禁用
              }
            }
          })
        }
      } else {
        this.$msg.warningMessage(resp.message)
      }
    }).catch(reason => console.error(reason))
  },
  mounted() {
    EventBus.publish(EventType.leftMetas, this.leftMetas)

    // 加载数据库表
    this.$store.dispatch('loadingDbList')
    // 加载字典列表
    this.$store.dispatch('loadingDictList');
  },
  methods: {
    ...mapMutations(['setViewGlobalAttr', 'recover']),
  }
}
</script>

<style>
.ivz-ohl-item {
  cursor: pointer;
  margin: 0px 6px;
}
.ivz-path-active a {
  color: darkorange!important;
}
.ivz-online-layout {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.ivz-online-layout ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.ivz-online-layout ::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: hsl(0deg 0% 0% / 22%);
  -webkit-box-shadow: inset 0 0 5px hsl(0deg 0% 100% / 5%);
}

.ivz-online-layout ::-webkit-scrollbar-track {
  border-radius: 3px;
  background: hsl(0deg 0% 83%);
  -webkit-box-shadow: inset 0 0 5px rgb(37 37 37 / 5%);
}
</style>
